<template>
	<view>
		<u-popup
			:show="show"
			:closeOnClickOverlay="false"
			mode="center"
			round="5px"
			customStyle="width: 95%"
			@close="handleClose"
			@open="handleOpen"
		>
			<view class="pad-10">
				<view class="font-14 font-b-800 mar-t-10">
					<text>故障件信息：</text>
				</view>
				
				<view class="mar-t-20">
					<view class="flex align-center mar-t-10 font-14">
						<view class="w-px-90">
							<text>名称</text>
							<text class="color-ff0000">*</text>
						</view>
						
						<view class="flex-1">
							<u-input v-model="name" placeholder="请输入名称"></u-input>
						</view>
					</view>
					
					<view class="flex align-center mar-t-10 font-14">
						<view class="w-px-90">
							<text>图件号</text>
						</view>
						
						<view class="flex-1">
							<u-input v-model="num" placeholder="请输入图件号"></u-input>
						</view>
					</view>
					
					<view class="flex align-center mar-t-10 font-14">
						<view class="w-px-90">
							<text>单价</text>
						</view>
						
						<view class="flex-1">
							<u-input v-model="unitPrice" placeholder="请输入单价" type="digit"></u-input>
						</view>
					</view>
					
					<view class="flex align-center mar-t-10 font-14">
						<view class="w-px-90">
							<text>需求数量</text>
							<text class="color-ff0000">*</text>
						</view>
						
						<view class="flex-1">
							<u-input v-model="demand" placeholder="请输入需求数量" type="number"></u-input>
						</view>
					</view>
					
					<view class="flex align-center mar-t-10 font-14">
						<view class="w-px-90">
							<text>申请数量</text>
							<text class="color-ff0000">*</text>
						</view>
						
						<view class="flex-1">
							<u-input v-model="apply" placeholder="请输入申请数量" type="number"></u-input>
						</view>
					</view>
					
					<view class="flex align-center mar-t-10 font-14">
						<view class="w-px-90">
							<text>单位</text>
							<text class="color-ff0000">*</text>
						</view>
						
						<view class="flex flex-1">
							<view class="flex-1 mar-r-10">
								<u-input v-model="unit" placeholder="请输入单位"></u-input>
							</view>
							
							<view
								class="flex align-center justify-center flex-1 border-rad-5 color-999999"
								hover-class="hoverClass"
								style="border: 1px #e3e4e6 solid"
								@click="openSelectUnit()"
							>
								<text>选择单位</text>
								<u-icon name="arrow-down" size="14" class="mar-l-5"></u-icon>
							</view>
						</view>
					</view>
				</view>
				
				<view class="flex align-center mar-t-20">
					<u-button type="info" class="mar-r-10" @click="handleClose">取消</u-button>
					<u-button type="primary" @click="handleConfirm">确定</u-button>
				</view>
			</view>
		</u-popup>
		
		<!-- 单位选择弹窗 -->
		<view
			v-if="danwei.show"
			class="flex align-center justify-center"
			:style="{
				position: 'fixed',
				left: 0,
				right: 0,
				top: 0,
				bottom: 0,
				zIndex: 99999,
				background: 'rgba(0, 0, 0, 0.6)'
			}"
		>
			<view class="pad-10 bg-white border-rad-10" style="width: 90%;">
				<view class="font-14 font-b-800 mar-t-10">
					<text>选择单位：</text>
				</view>
				
				<view class="mar-t-20">
					<view
						v-for="(item, index) in danwei.list"
						:key="index"
						class="flex align-center justify-between h-px-40 mar-t-10 pad-x-10 border-rad-5"
						hover-class="hoverClass"
						:style="{
							border: '1px #e6e6e6 solid'
						}"
						@click="selectUnit(item)"
					>
						<view>
							<text>{{ item.label }}</text>
						</view>
						
						<view>
							<text
								:class="'iconfont ' + (item.checked ? 'icon-icon_radio_xuanzhong' : 'icon-radioweixuanzhong')"
								:style="{
									color: item.checked ? '#bd3124' : '#cccccc'
								}"
							></text>
						</view>
					</view>
				</view>
				
				<view class="flex align-center mar-t-20">
					<u-button type="info" class="mar-r-10" @click="closeSelectUnit()">取消</u-button>
					<u-button type="primary" @click="confirm()">确定</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Utils from '@/utils/utils'
	
	export default {
		props: {
			
		},
		
		data() {
			return {
				// 控制弹出显示
				show: false,
				
				// 名称
				name: '',
				
				// 图件号
				num: '',
				
				// 单价
				unitPrice: null,
				
				// 需求数量
				demand: null,
				
				// 申请数量
				apply: null,
				
				// 单位
				unit: '',
				
				// 单位选择
				danwei: {
					show: false,
					list: [
						{ label: '台', checked: true },
						{ label: '个', checked: false },
						{ label: '箱', checked: false },
						{ label: '套', checked: false }
					]
				},
			}
		},
		
		methods: {
			// 打开组件
			handleOpen() {
				this.show = true
			},
			
			// 关闭组件
			handleClose() {
				this.show = false
				this.reset()
			},
			
			// 重置
			reset() {
				this.name = ''
				this.num = ''
				this.unitPrice = null
				this.demand = null
				this.apply = null
				this.unit = ''
			},
			
			// 确定（提交数据）
			handleConfirm() {
				if (!this.name) {
					Utils.popUpMsg('none', '名称不得为空', 1500)
					return
				}
				
				if (this.demand === '' || this.demand === null || this.demand === undefined) {
					Utils.popUpMsg('none', '需求数量不得为空', 1500)
					return
				}
				
				if (this.apply === '' || this.apply === null || this.apply === undefined) {
					Utils.popUpMsg('none', '申请数量不得为空', 1500)
					return
				}
				
				if (!this.unit) {
					Utils.popUpMsg('none', '单位不得为空', 1500)
					return
				}
				
				let data = {
					name: this.name,
					num: this.num,
					unitPrice: this.unitPrice,
					demand: this.demand,
					apply: this.apply,
					unit: this.unit,
				}
				
				this.$emit('handleAddRepairInfo', data)
				this.handleClose()
			},
			
			// 打开选择单位弹窗
			openSelectUnit() {
				this.danwei.show = true
			},
			
			// 选择单位
			selectUnit(row) {
				this.danwei.list.forEach(item => {
					item.checked = false
					
					if (item.label === row.label) {
						item.checked = true
					}
				})
			},
			
			// 选择单位确定的回调
			confirm() {
				this.closeSelectUnit()
			},
			
			// 关闭选择单位弹窗
			closeSelectUnit() {
				this.unit = this.danwei.list.filter(item => item.checked)[0].label
				this.danwei.list.forEach(item => {
					item.checked = false
					if (item.label === '台') {
						item.checked = true
					}
				})
				
				this.danwei.show = false
			},
		}
	}
</script>

<style>
</style>